{extend name="main"}
{block name="style"}
<style>
    .ellipsis {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>
{/block}
{block name="body"}
<div class="bg-white mb-3">
    <div class="flex">
        <el-form :model="search" @submit.native.prevent="submitForm" ref="search" label-position="right"
            class="flex py-3">
            <el-form-item label="部门名称" prop="search_type" class="flex mb-0 pl-3 mr-3">
                <el-input v-model="search.keyword" placeholder="请输入部门名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="initHtml" icon="el-icon-search">查询</el-button>
                <el-button @click="resetForm('search')">重置</el-button>
            </el-form-item>
        </el-form>
        <div class="el-form flex py-3 pb-3">
            <el-form style="position: absolute; right: 60px">
                <el-form-item>
                    <el-button type="primary" @click="pullFromWorkWechat" active-value="1" inactive-value="0"
                        icon="el-icon-download">
                        同步企微
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</div>
<div class="bg-white p-3">
    <div class="table-responsive py-3 flex">
        <div class="element-doc">
            被锁定的部门信息不会被更新，其下级的员工信息也不会更新【<span style="color: #F56C6C">注：列表中仅展示顶级部门和二级部门，其他层级不展示</span>】
        </div>
    </div>
    <!-- <div class="table-responsive py-3"> -->
    <el-row class="py-3" :gutter="10" width="100%">
        <el-col class="mb-2" :span="6" v-for="(item, index) in tableData" :key="item.id">
            <el-card>
                <div slot="header" class="clearfix">
                    <!-- <div style="position:absolute; float: left; width: 60%; overflow: hidden;">{{item.title}}</div>
                    <el-switch @change="setLocked(item)" active-color="#ff4949" :active-value="1" :inactive-value="0"
                        class="py-3" style="float: right;" v-model="item.locked" active-text="禁止同步">
                    </el-switch> -->
                    <el-row :gutter="5">
                        <el-col :span="14">
                            <div class="ellipsis" style="padding-top: 3px;"><b>{{item.title}}</b>
                            </div>
                        </el-col>
                        <el-col :span="10">
                            <div style="min-width: 106px;">
                                <el-switch @change="setLocked(item)" active-color="#ff4949" :active-value="1"
                                    :inactive-value="0" class="py-3" style="float: right;" v-model="item.locked"
                                    active-text="禁止同步">
                                </el-switch>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <div class="mb-2">
                    企微部门ID：<span>{{item.dep_code}}</span>
                </div>
                <div class="mb-2">
                    员工数量：<span>{{item.employees ?? 0}}</span>
                </div>
                <div class="mb-2">
                    导入时间：<span>{{item.create_time}}</span>
                </div>
                <div>
                    最近同步：<span>{{item.update_time}}</span>
                </div>
            </el-card>
        </el-col>
    </el-row>
</div>
{/block}
{block name="script"}
{js href="__PLUGIN_SRC__/Clipboard/clipboard.min.js"}
<script>
    const baseView = { view: XYBase.view }
    const vm = new Vue({
        el: '#app',
        data() {
            return {
                /*使用展开运算符导入页面必须配置(不然全写在vm里太啰嗦了)*/
                ...baseView,
                search: {
                    requesting: false,
                    page: 1,
                    pageSize: 15,
                    total: 0,
                    keyword: ''
                },
                tableData: []
            }
        },
        methods: {
            pullFromWorkWechat() {
                let _this = this
                if (this.search.requesting) {
                    return
                }
                this.search.requesting = true
                loading = XYBase.openloading('正在从企微同步：同步未导入的部门，更新未锁定的部门')
                $.ajax({
                    url: '/work-wechat/pull-departments',
                    type: 'POST',
                    success(res) {
                        loading.close()
                        if (res.code != undefined && res.code == 0) {
                            _this.tableData = res.data.data
                            XYBase.success(res.msg)
                        } else if (res.msg != undefined) {
                            XYBase.msg(res.msg)
                        }
                    },
                    error(xhr) {
                        loading.close()
                        XYBase.error(XYBase.config.system_network_error)
                        console.log(xhr)
                    },
                    complete() {
                        _this.search.requesting = false
                    }
                })
            },
            setLocked(item) {
                $.ajax({
                    url: '?action=setLocked',
                    type: 'POST',
                    data: JSON.stringify({ id: item.id, locked: item.locked ? 1 : 0 }),
                    contentType: 'application/json;'
                })
            },
            resetForm() {
                this.search = {
                    page: 1,
                    pageSize: 15,
                    total: 0,
                    keyword: '',
                    sort: 'id'
                }
            },
            initHtml() {
                let _this = this
                let msg = ''
                if (this.search.requesting) {
                    return
                }
                this.search.requesting = true
                $.ajax({
                    url: '',
                    data: _this.search,
                    success(res) {
                        console.log(res)
                        if (res.code != undefined && res.code == 0) {
                            _this.tableData = res.data.data
                            if (_this.tableData.length < 1) {
                                XYBase.msg('暂无数据~')
                            } else {
                                XYBase.success('获取成功')
                            }
                        } else if (res.msg != undefined) {
                            XYBase.msg(res.msg)
                        }
                    },
                    error(xhr) {
                        XYBase.error(XYBase.config.system_network_error)
                        console.log(xhr)
                    },
                    complete() {
                        _this.search.requesting = false
                    }
                })
            }
        },
        created() {
            this.initHtml()
            XYBase.created(this)
        },
    })
</script>
{/block}